@import "reset";

//@import 'element/light.css';
//@import "element/dark.css";


html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
}

.main-dark-bg-color {
  background-color: #1E1E1E;
}

.main-light-bg-color {
  background-color: #F5F6FB;
}

/* transition fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 自定义滚动条样式 */
.cus-scroll {
  overflow: auto;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

.cus-scroll-x {
  overflow-x: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }
}

.cus-scroll-y {
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    height: 0;
  }
}

.cus-scroll,
.cus-scroll-x,
.cus-scroll-y {
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgb(var(--primary-color));
    }
  }
}

.hidden {
  display: none;
}

.w-64 {
  width: 64px;
}

.w-220 {
  width: 220px;
}

.px-12 {
  padding: 0 12px;
}

.w-0 {
  width: 0;
}

.flex-1 {
  flex: 1 1 0%;
}

.h-full {
  height: 100%;
}

.cus-scroll {
  overflow: auto;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.mx-6 {
  margin: 0 6px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-12 {
  margin-left: 12px;
}

.ml-32 {
  margin-left: 32px;
}

.opacity-20 {
  opacity: 0.2;
}

.flex {
  display: flex;
}


.cursor-pointer {
  cursor: pointer;
}

.menu-items:not(.el-menu--collapse) .el-menu-item {
  &::before {
    z-index: auto;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: 0;
    content: '';
    pointer-events: none;
    border-radius: var(--el-border-radius-base);
    transition: background-color 0.3s var(--el-transition-function-ease-in-out-bezier);
  }

  &.is-active::before {
    background-color: rgb(var(--el-color-primary-rgb), 0.13);
    border-left: 4px solid var(--el-menu-active-color);
  }

  &.is-active .icon-color {
    fill: var(--el-menu-active-color);
  }

  &.is-active:hover {
    background-color: transparent;
  }
}



